<?= $this->doctype(Zend_View_Helper_Doctype::HTML5) ?>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
    <title dir="ltr">HTML5</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" media="screen" href="" >
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>   
</head>
<body>
    




   
    

<?= $this->layout()->content ?>

       
<style type="text/css">
html, body 
{
    width:100%;
    height:100%;
    font-family:Helvetica, Arial;
    font-size:.85em;
}
html, body, p, div 
{
    margin:0;
}
#main
{
    display:-moz-box;
    -moz-box-orient:vertical;
    width:100%;
    height:100%;
    background:#def;
}
#flexbox 
{ 
    display:-moz-box;
    -moz-box-orient:horizontal;
    width:100%;
    background:#000;
}
#flexbox1
{
    -moz-box-flex:1;
    display:-moz-box;
    -moz-box-orient:horizontal;
    width:100%;
    background:#eee;
    -moz-box-align:center;
    -moz-box-pack:center;
}
#flexbox2
{
    -moz-box-flex:2;
    display:-moz-box;
    -moz-box-orient:vertical;
    width:100%;
    background:#ddd;
    padding:10px;
    -moz-box-align:center;
    -moz-box-pack:center;
}
#flexbox > p
{
    padding:10px;
}
#flexbox > p:nth-child(1) 
{
    background:#aaa;
    -moz-box-flex:1;
}
#flexbox > p:nth-child(2) 
{
    background:#bbb;
    -moz-box-flex:2;
}
#flexbox > p:nth-child(3) 
{
    
    background:#ccc;
    -moz-box-flex:3;
}
@media screen and (max-width:500px) {
    #flexbox 
    { 
        -moz-box-orient:vertical;
    }  
}
</style>

<div id="main">
    <div id="flexbox">
        <p>flexbox child 1</p>
        <p>flexbox child 2</p>
        <p>flexboxchild 3</p>
    </div>
    <div id="flexbox1">
        flexbox1
    </div>
    <div id="flexbox2">
        <?php for ($j = 0; $j < 5; $j++) : ?>
        <div style="-moz-box-flex:0; display:-moz-box; -moz-box-orient:horizontal;">
            <?php for ($i = 0; $i < 5; $i++) : ?>
            <div style="background-image: -moz-linear-gradient(top, #ccc, #aaa); -moz-box-flex:0; box-shadow:1px 1px 1px #aaa; border-left:1px solid #fff; border-top:1px solid #fff; margin:5px; width:100px; height:100px; border-radius:5px;">a</div>
            <?php endfor; ?>
        </div>
        <?php endfor; ?>
        
        <!--<?php for ($i = 0; $i < 5; $i++) : ?>
        <div style="display:-moz-box; -moz-box-orient:vertical; -moz-box-flex:1;">
            
            <div style="display:-moz-box; -moz-box-orient:horizontal; -moz-box-flex:1;">
                <?php for ($j = 0; $j < 5; $j++) : ?>
                <div style="margin:5px;">a </div>
                <?php endfor; ?>
            </div>    
            
        </div>
        <?php endfor; ?>-->
        
    </div>
</div>    
<!--
<p style="width: 400px; display: flexbox; background: red">
    <button style="width: 200px; background: green">Child 1</button>
    <button style="width: 100px; background: blue">Child 2</button>
</p>-->
    
</body>
</html>